<template>
  <div class ="stage1">
    <div style="margin-top: 20px;margin-left: 20px; height: 100px; width:100%">
      <span style="margin-left: 20px"></span>
      <el-tag type="" label="" effect="dark" style="margin-left: 20px;">侦察</el-tag>
      <el-tag type="success" label="" effect="dark" style="margin-left: 20px;">定位</el-tag>
      <el-tag type="warning" label="" effect="dark" style="margin-left: 20px;">决策</el-tag>
      <el-tag type="danger" label="" effect="dark" style="margin-left: 20px;">打击</el-tag>
      <el-tag type="info" label="" effect="dark" style="margin-left: 20px;">单击作战任务进行下一步推演</el-tag>
      <el-tag type="info" label="" effect="dark" style="margin-left: 20px;">双击查看详细信息</el-tag>
      <el-button @click="start()" plain type="primary" style="margin-left: 20px;">重新开始推演</el-button>
      <el-button @click="showAll()" plain type="primary" style="margin-left: 20px;">显示完整杀伤链</el-button>
    </div>

    <!-- 作战任务层 -->
    <div style="margin-top: 20px; height: 80px;margin-left: 20px; overflow-x:auto;">
      <span class="layer-title">作战任务层</span>
      <el-collapse-transition>
        <span v-show="show1">
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
               <img src="../../../assets/侦察机巡逻.jpg" class="image" />
            </div>
            <el-button type="primary" @click="show2 = !show2" @dblclick.native="showInfo($event)">
              侦察机例行巡逻
              <!-- <el-button @click="show2 = !show2" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show2">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/侦察机发现目标.jpg"  class="image" />
            </div>
            <el-button type="primary" @click="show3 = !show3" @dblclick.native="showInfo($event)">
              侦察机发现目标
              <!-- <el-button @click="show3 = !show3" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show3">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/定位目标.jpg"  class="image" />
            </div>
            <el-button type="primary" @click="show4 = !show4" @dblclick.native="showInfo($event)">
              侦察机定位目标
              <!-- <el-button @click="show4 = !show4" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show4">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/侦查机识别目标.jpg"  class="image" />
            </div>
            <el-button type="primary" @click="show5 = !show5" @dblclick.native="showInfo($event)">
              侦察机识别目标
              <!-- <el-button @click="show5 = !show5" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show5">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/侦查机指派战机.jpg"  class="image" />
            </div>
            <el-button type="primary" @click="show6 = !show6" @dblclick.native="showInfo($event)">
              侦察机指派战机
              <!-- <el-button @click="show6 = !show6" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show6">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
             <img src="../../../assets/2.jpg"  class="image" />
            </div>
            <el-button type="success" @click="show7 = !show7" @dblclick.native="showInfo($event)">
              前往指定战位
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show7">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/识别目标.jpg"  class="image" />
            </div>
            <el-button type="success" @click="show8 = !show8" @dblclick.native="showInfo($event)">
              定位目标
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show8">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/定位目标.jpg"  class="image" />
            </div>
            <el-button type="success" @click="show9 = !show9" @dblclick.native="showInfo($event)">
              识别目标
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show9">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/决策.jpg"  class="image" />
            </div>
            <el-button type="warning" @click="show10 = !show10" @dblclick.native="showInfo($event)">
              进行决策
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show10">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/战机锁定目标.jpg"  class="image" />
            </div>
            <el-button type="danger" @click="show11 = !show11" @dblclick.native="showInfo($event)">
              锁定目标
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show11">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/飞机发射导弹.jpg"  class="image" />
            </div>
            <el-button type="danger" @click="show12 = !show12" @dblclick.native="showInfo($event)">
              发射导弹
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show12">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/3.jpg"  class="image" />
            </div>
            <el-button type="danger" @click="show13 = !show13" @dblclick.native="showInfo($event)">
              与导弹传输数据
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show13">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/机弹分离.jpg"  class="image" />
            </div>
            <el-button type="danger" @click="show14 = !show14" @dblclick.native="showInfo($event)">
              机弹分离
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show14">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/中段制导.jpg"  class="image" />
            </div>
            <el-button type="danger" @click="show15 = !show15" @dblclick.native="showInfo($event)">
              中段制导
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show15">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content"><img src="../../../assets/1.jpg"  class="image" />  </div>
            <el-button type="danger" @click="show16 = !show16" @dblclick.native="showInfo($event)">
              末段制导
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show16">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content"><img src="../../../assets/导弹引爆.jpg"  class="image" />  </div>
            <el-button type="danger" @dblclick.native="showInfo($event)">
              战斗部起爆
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
    </div>

    <!-- 作战需求层 -->
    <div style="margin-top: 20px; height: 80px;margin-left: 20px;">
      <span class="layer-title">作战需求层</span>
      <el-collapse-transition>
        <span v-show="show2">
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="primary" @dblclick.native="showInfo($event)">
              发现目标能力
              <!-- <el-button  @click="show2 = !show2" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show3">
          <i class="el-icon-circle-plus-outline"></i>
          <!-- <span class="arrow">&#10230;</span> -->
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="primary" @dblclick.native="showInfo($event)">
              跟踪目标能力
              <!-- <el-button   @click="show2 = !show2" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show8">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="success" @dblclick.native="showInfo($event)">
              目标识别能力
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show9">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="warning" @dblclick.native="showInfo($event)">
              威胁度评估能力
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show9">
          <i class="el-icon-circle-plus-outline"></i>
          <!-- <span class="arrow">&#10230;</span> -->
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="warning" @dblclick.native="showInfo($event)">
              突发应变能力
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show10">
          <!-- <i class="el-icon-circle-plus-outline"></i> -->
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="danger" @dblclick.native="showInfo($event)">
              反拦截能力
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show15">
          <i class="el-icon-circle-plus-outline"></i>
          <!-- <span class="arrow">&#10230;</span> -->
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="danger" @dblclick.native="showInfo($event)">
              制导交接班能力
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show16">
          <i class="el-icon-circle-plus-outline"></i>
          <!-- <span class="arrow">&#10230;</span> -->
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">双击查看详情</div>
            <el-button type="danger" @dblclick.native="showInfo($event)">
              命中精度
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
    </div>

    <!-- 作战装备层 -->
    <div style="margin-top: 20px; height: 80px;margin-left: 20px;">

      <span class="layer-title">作战装备层</span>
      <el-collapse-transition>
        <span v-show="show2">
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              <img src="../../../assets/Kkk.jpg" alt="预警机" class="image" />
            </div>
            <el-button type="primary" @dblclick.native="showInfo($event)">
              预警机
              <!-- <el-button  circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>

      <el-collapse-transition>
        <span v-show="show5">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">

              <img src="../../../assets/Jjj.jpg" alt="战斗机" class="image" />

            </div>
            <el-button type="success" @dblclick.native="showInfo($event)">
              战斗机
              <!-- <el-button  circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
      <el-collapse-transition>
        <span v-show="show12">
          <span class="arrow">&#10230;</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
            <img src="../../../assets/Ppp.jpg" alt=" 导弹" class="image" />
            </div>
            <el-button type="danger" @dblclick.native="showInfo($event)">
              导弹
              <!-- <el-button @click="show7 = !show7" circle type="info" icon="el-icon-right"></el-button> -->
            </el-button>
          </el-tooltip>
        </span>
      </el-collapse-transition>
    </div>

    <!-- 说明文字 -->
    <div class="description">
      <!-- <el-descriptions title="作战事件详细信息" :column="4" :size="size" border >
        <el-descriptions-item v-for="(val, key, index) in description" :label="key" :key="index">{{ val }}</el-descriptions-item>
      </el-descriptions> -->
      <el-tag type="info" label="" effect="plain" style="margin-bottom: 20px;margin-left:50%;">典型空对空场景描述</el-tag>
      <el-form ref="description" label-width="100px" >
        <el-form-item label="作战环境" prop="作战环境">
          <el-input v-model="description.作战环境"></el-input>
        </el-form-item>
        <el-form-item label="作战规模" prop="作战规模">
          <el-input v-model="description.作战规模"></el-input>
        </el-form-item>
        <el-form-item label="作战区域" prop="作战区域">
          <el-input v-model="description.作战区域"></el-input>
        </el-form-item>
        <el-form-item label="作战目标" prop="作战目标">
          <el-input v-model="description.作战目标" ></el-input>
        </el-form-item>
        <el-form-item label="描述信息" prop="描述">
          <el-input type="textarea" v-model="description.描述" :rows="4"></el-input>
        </el-form-item>
        </el-form>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog ref="taskDialog" :title="info.title" :visible.sync="taskDialogVisible">
      <el-descriptions title="以下是该节点的详细信息" :column="3" :size="size" border>
        <el-descriptions-item v-for="(val, key, index) in info" :label="key" :key="index">{{ val }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data: () => ({
    show1: true,
    show2: false,
    show3: false,
    show4: false,
    show5: false,
    show6: false,
    show7: false,
    show8: false,
    show9: false,
    show10: false,
    show11: false,
    show12: false,
    show13: false,
    show14: false,
    show15: false,
    show16: false,
    size: "2",
    taskDialogVisible: false,
    info: {},
    tasks: [
      {
        id: "scout-01",
        nodeType: "作战任务",
        type: "侦察",
        subType: "巡逻",
        time: "2022-11-15T10:00:00",
        place: "东经105度至110度,北纬4度至21度",
        entity: "预警机",
        target: "",
        title: "侦察机例行巡逻",
        description: "侦察机在南海上空进行例行巡逻"
      }
    ],
    requirements:[
      {
        id: "scout-re-01",
        title: "发现目标能力",
        type:"侦察",
        description:"能够发现100km内,雷达散射截面积大于0.1平方米的目标"
      }
    ],
    equipments:[
      {
        id: "scout-eq-01",
        title: "预警机",
        type:"侦察",
        description:"预警机"
      }
    ],
    description:{
      作战环境:"空中作战",
      作战规模:"小规模冲突",
      作战区域:"xxx",
      作战目标:"在擦枪走火中取得首胜，震慑对手，为后续军事行动提供舆论基础。",
      描述:"xx",

    }
  }),
  methods: {
    //开始推演
    start() {
      this.show1 = true
      this.show2 = false
      this.show3 = false
      this.show4 = false
      this.show5 = false
      this.show6 = false
      this.show7 = false
      this.show8 = false
      this.show9 = false
      this.show10 = false
      this.show11 = false
      this.show12 = false
      this.show13 = false
      this.show14 = false
      this.show15 = false
      this.show16 = false
    },
    showAll() {
      this.show1 = true
      this.show2 = true
      this.show3 = true
      this.show4 = true
      this.show5 = true
      this.show6 = true
      this.show7 = true
      this.show8 = true
      this.show9 = true
      this.show10 = true
      this.show11 = true
      this.show12 = true
      this.show13 = true
      this.show14 = true
      this.show15 = true
      this.show16 = true
    },
    showInfo(event) {
      console.log("显示：" + event.target.innerText)
      //let taskData={};
      this.tasks.forEach(task => {
        if (task.title == event.target.innerText) {
          this.info = task
          this.taskDialogVisible = true
          return
        }
      });
      this.requirements.forEach(element => {
        if (element.title == event.target.innerText) {
          this.info = element
          this.taskDialogVisible = true
          return
        }
      });
      this.equipments.forEach(element => {
        if (element.title == event.target.innerText) {
          this.info = element
          this.taskDialogVisible = true
          return
        }
      });

    }
  }
}
</script>

<style>
.layer-title {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  margin-left: 20px;
}

.span-box {
  margin-bottom: 10px;

  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 10px;
}

.arrow {
  content: "\27F6";
}

el-collapse-transition {
  flex-shrink: 0;
}
.description{
  width:650px;
  margin-left:20px;
  margin-top:12%;

}
.stage1{
  display: inline-block;
  /* overflow: hidden; */
  white-space: nowrap;
}
.image {
  max-width: 100%; /* 图片宽度不超过容器宽度 */
  max-height: 100%; /* 图片高度不超过容器高度 */
}
.image {
  width: 300px;
  height: 290px;
}



</style>
